function Molecule(name) {
    this.name = name;
}

//To DO: read wiki JSON article= understanding objects in javascript
//Molecule name to atomic coordinates map
var mn2ac = {
    "O2" : ["O", -1.1, 0, "O", 1.2, 0],
    "H2" : ["H", -0.6, 0, "H", 0.7, 0],
    "H2O" : ["H", -1, 0, "H", 1, 0, "O", 0, -1]
};
//element name to atom propertiesF
var en2ap = {
    "O" : ["#0000FF", "#000080", 1.2], // en2ap[name][2] is the size scalar for the respective element
    "H" : ["#FF8C00", "#FF0000", 0.7]
};

function drawMolecules(root) {
    $.each(root.find("canvas"), function(i, c) {
        var w = $(c).width();
        var h = $(c).height();
        var name = $(c).attr("name");
        c.getContext("2d").drawMolecule(name, 0.5 * w, 0.5 * h, generalScale)

    })
}
CanvasRenderingContext2D.prototype.drawMolecule = function(name, x, y, scale) {
    var coords = mn2ac[name];
    for(var i = 0; i < coords.length / 3; i++) {
        var namea = coords[i * 3];
        var xa = x + scale * coords[i * 3 + 1];
        var ya = y + scale * coords[i * 3 + 2];
        this.drawAtom(namea, xa, ya, scale)
    }
};

CanvasRenderingContext2D.prototype.drawAtom = function (name, x, y, scale) {
    var ap = en2ap[name];
    var atom_scalar = ap[2];
    var newScale = scale * ap[2]
    var xi = x - 0.3 * newScale;
    var yi = y - 0.3 * newScale;
    var ri = 0.2 * newScale;
    var rf = newScale;
    var gradient = this.createRadialGradient(xi, yi, ri, x, y, rf);
    gradient.addColorStop(0, ap[0]);
    gradient.addColorStop(1, ap[1]);
    this.fillStyle = gradient;
    this.fillCircle(x, y, newScale);
};